import { Component, OnInit } from '@angular/core';
import { nameTheMenu } from './name-the-menu';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  // 子导航是否显示
  subnavDisplay = false;
  // 主导航菜单项名称
  nameTheMenu = nameTheMenu;
  // 悬停子导航名
  hoverSubnavName = null;

  constructor() {}

  ngOnInit() {}

  subnavDisplayToggle(name: string) {
    this.subnavDisplay = !this.subnavDisplay;
    if (this.subnavDisplay) {
      this.hoverSubnavName = name;
    }
  }

  subnavDisplayTrue() {
    this.subnavDisplay = !this.subnavDisplay;
  }

  /**
   * 比较两值，若相等返回 'block'，否则返回 'none'
   * @param v1 值
   * @param v2 比较值
   */
  displayFlex(v1: string, v2: string) {
    return v1 === v2 ? 'flex' : 'none';
  }
}
